简述container与container-fluid的区别

在bootstrap中的布局容器一栏中，提供了container与container-fluid两种容器，其官方解释为：

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

所以，先说一说它们的共同点：这两种容器的高度设定都是一致的，都为auto。而他们的不同就在于它们宽度的设定上。

• container根据屏幕宽度利用媒体查询，已经设定了固定的宽度，作用为阶段性的改变宽度，所以在改变浏览器的大小时，页面是一个阶段一个阶段变化的。

• container-fluid则是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。

如果比喻的话，container就如一个嵌套的水池，只有当最里面最小的那个池子注满水后才会溢到下一个更大的池子，而container-fluid则没有隔断，倒入多少水，就充满多少。

还有一点则是使用container时，你会发现在容器外有一个随着浏览器宽度变化而变化的margin，而使用container-fluid则没有这个margin。而这个margin正是container的作用原理。